<!DOCTYPE html>
<!-- saved from url=(0043)http://keith-wood.name/pluginFramework.html -->
<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths translated-ltr" style=""><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link href="http://keith-wood.name/kw-name.rss.xml" type="application/rss+xml" rel="alternate" title="RSS Feed">
<meta charset="utf-8">
<title>Um quadro Plugin jQuery</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/ico" href="http://keith-wood.name/favicon.ico">
<link rel="stylesheet" href="http://keith-wood.name/css/normalize.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css">
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.bookmark.css">
<link rel="stylesheet" href="http://keith-wood.name/css/demo.css">
<style>
pre { padding: 0.5em; }
#index { position: fixed; right: 0em; top: 3em; padding: 0em; list-style: none; font-size: 90%; text-align: right; }
#index li { margin: 0.25em 0em; padding: 0em 0.5em; }
#index #popup { margin: 0em; padding: 0.25em 0.5em; text-align: center; }
</style>
<script src="./Um quadro Plugin jQuery_files/modernizr-2.6.2.min.js"></script>
<script src="./Um quadro Plugin jQuery_files/jquery.min.js"></script>
<script src="./Um quadro Plugin jQuery_files/jquery-ui.min.js"></script>
<script src="./Um quadro Plugin jQuery_files/jquery.bookmark.js"></script>
<script src="./Um quadro Plugin jQuery_files/jquery.chili-2.2.js"></script>
<script src="./Um quadro Plugin jQuery_files/demo.js"></script>
<script>
$(function() {
	$('#popup').click(function() { $('#index li').toggle(); });
	$('#index li:not(:first)').click(function() { $('#popup').click(); }).hide();
	$(document).click(function(event) {
		if ($(event.target).closest('#index').length == 0 &&
				!$('#popup').is(':visible')) {
			$('#popup').click();
		}
	});
});
</script>
<style type="text/css">/* Chili -- js */
.js__ml_comment { color: green; }
.js__sl_comment { color: green; }
.js__string { color: blue; }
.js__num { color: red; }
.js__reg_exp { color: maroon; }
.js__brace { font-weight: bold; }
.js__statement { color: black; font-weight: bold; }
.js__error { color: coral; }
.js__object { color: purple; font-weight: bold; }
.js__property { color: purple; font-weight: bold; }
.js__function { color: olive; }
.js__operator { color: navy; font-weight: bold; }
.js__liveconnect { text-decoration: overline; }</style><style type="text/css">/* Chili -- html */
.html__doctype { color: purple; }
.html__ie_style { color: DarkSlateGray; font-weight: bold; }
.html__comment { color: green; }
.html__tag_start { color: navy; font-weight: bold; }
.html__tag_end { color: navy; font-weight: bold; }
.html__entity { color: green; }
.html__attr_name { color: purple; }
.html__attr_value { color: blue; }</style><link type="text/css" rel="stylesheet" charset="UTF-8" href="./Um quadro Plugin jQuery_files/translateelement.css"><script type="text/javascript" charset="UTF-8" src="./Um quadro Plugin jQuery_files/main_pt-BR.js"></script><script type="text/javascript" charset="UTF-8" src="./Um quadro Plugin jQuery_files/element_main.js"></script></head>
<body style="">
<ul id="index" class="ui-state-active">
	<li id="popup"><font><font>I </font></font><br><font><font>N </font></font><br><font><font>D </font></font><br><font><font>E </font></font><br><font><font>X</font></font></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#intro"><font><font>Introdução</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#case"><font><font>Estudo de Caso</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#invoke"><font><font>Primeiros Passos</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#manager"><font><font>Singleton Gerente</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#attach"><font><font>Acessório</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#change"><font><font>Alterar Configurações</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#body"><font><font>Corpo</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#length"><font><font>Atual Comprimento</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#destroy"><font><font>Destruição</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#test"><font><font>Teste</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#publish"><font><font>Publishing</font></font></a></li>
	<li style="display: none;"><a href="http://keith-wood.name/pluginFramework.html#download"><font><font>Transferências</font></font></a></li>
</ul>
<header role="banner">
	<div id="header-links"><a id="home" href="http://keith-wood.name/index.html"><img src="./Um quadro Plugin jQuery_files/homePage.png" alt="Home page" title="Home page"></a>&nbsp;<a href="http://keith-wood.name/pluginFramework.html#" id="donate"><img src="./Um quadro Plugin jQuery_files/donate.png" alt="Doar" title="Doar"></a>&nbsp;<div id="donations" style=""><h3><font><font>Doações</font></font></h3><div><font><font>Se você gostaria de doar algo para os meus esforços, por favor visite o meu </font></font><a href="http://www.amazon.com/wishlist/2OEDAIL14M64W/ref=cm_wl_rlist_go" target="_blank"><font><font>Amazon Lista</font></font></a><font><font> ou doar diretamente através</font></font><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"><input type="hidden" name="cmd" value="_s-xclick"><input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHNwYJKoZIhvcNAQcEoIIHKDCCByQCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYB33bliXOtFtvHh2ny/3KxX525RgKcAR9XSKCxL2vLIvXQmNL0NH6MQwrRHXhQR0SFXqatxVKoViGDY5HvjJxOnxJ/Kyn+DrU6EGaYZaKZpbOh5LVjWFKZVcSGS2WgLUFDOsR/46a+0LK9iWkkgRXXapvpmGgVnMpNRAPU7eUHCgDELMAkGBSsOAwIaBQAwgbQGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQIcrnteGhsO/KAgZCvegEQgxDUrDAv5sAI24qfPg45zl7W1lb8UssjhdS5uy63hHXJDVYZZ2bgjVqCM3niy9GIQ8Pdv5/7X34bLrViuNmQvMmWpq/C9cScnDmNoeAwxKIHYcaY5QgjdqkRaWP7edDtBxKjLGJaAPSsbCeGMnBMjLpCQJQG/NX+saXDpByUJpPydyNEz90L9MMrUrigggOHMIIDgzCCAuygAwIBAgIBADANBgkqhkiG9w0BAQUFADCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wHhcNMDQwMjEzMTAxMzE1WhcNMzUwMjEzMTAxMzE1WjCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wgZ8wDQYJKoZIhvcNAQEBBQADgY0AMIGJAoGBAMFHTt38RMxLXJyO2SmS+Ndl72T7oKJ4u4uw+6awntALWh03PewmIJuzbALScsTS4sZoS1fKciBGoh11gIfHzylvkdNe/hJl66/RGqrj5rFb08sAABNTzDTiqqNpJeBsYs/c2aiGozptX2RlnBktH+SUNpAajW724Nv2Wvhif6sFAgMBAAGjge4wgeswHQYDVR0OBBYEFJaffLvGbxe9WT9S1wob7BDWZJRrMIG7BgNVHSMEgbMwgbCAFJaffLvGbxe9WT9S1wob7BDWZJRroYGUpIGRMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbYIBADAMBgNVHRMEBTADAQH/MA0GCSqGSIb3DQEBBQUAA4GBAIFfOlaagFrl71+jq6OKidbWFSE+Q4FqROvdgIONth+8kSK//Y/4ihuE4Ymvzn5ceE3S/iBSQQMjyvb+s2TWbQYDwcp129OPIbD9epdr4tJOUNiSojw7BHwYRiPh58S1xGlFgHFXwrEBb3dgNbMUa+u4qectsMAXpVHnD9wIyfmHMYIBmjCCAZYCAQEwgZQwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tAgEAMAkGBSsOAwIaBQCgXTAYBgkqhkiG9w0BCQMxCwYJKoZIhvcNAQcBMBwGCSqGSIb3DQEJBTEPFw0xMzAzMjUwNTA2MThaMCMGCSqGSIb3DQEJBDEWBBSPoRvOzgEsqgKwpH1bwzMV32tFMjANBgkqhkiG9w0BAQEFAASBgD7gFfun3/yYHEysaOyjayxZdrs3zX6iIp87YC7h/TPvinhwStRV7G77cikKsDYNB4Gkc4irHubN/46oDrJizquyAME5wrl+mOeicjsDzGRd1iaJVymf+HliBguGcItVQkSdkK7W9RveeSb/bX7U/vl7Lgn8PlUOSjSoFdyfQfNh-----END PKCS7-----"><input type="image" src="./Um quadro Plugin jQuery_files/paypal.png" border="0" name="submit" alt="PayPal - A maneira mais segura, mais fácil de pagar online."><img alt="" border="0" src="./Um quadro Plugin jQuery_files/pixel.gif" width="1" height="1"></form><font><font>.</font></font></div><p><font><font>Obrigado aos que já doaram - Estou gostando da música e dança!</font></font></p></div><a href="http://keith-wood.name/pluginFramework.html#" id="crosslink"><img src="./Um quadro Plugin jQuery_files/plugins.png" alt="Outros plugins" title="Outros plugins"></a>&nbsp;<div id="crosslinks" style=""><ul><li><a href="http://keith-wood.name/backgroundPos.html"><font><font>Posição fundo</font></font></a></li><li><a href="http://keith-wood.name/bookmark.html"><font><font>Bookmark</font></font></a></li><li><a href="http://keith-wood.name/calculator.html"><font><font>Calculadora</font></font></a></li><li><a href="http://keith-wood.name/calendars.html"><font><font>Calendários</font></font></a></li><li><a href="http://keith-wood.name/countdown.html"><font><font>Contagem regressiva</font></font></a></li><li><a href="http://keith-wood.name/dateEntry.html"><font><font>Data entrada</font></font></a></li><li><a href="http://keith-wood.name/datetimeEntry.html"><font><font>Date / Time Entry</font></font></a></li><li><a href="http://keith-wood.name/datepick.html"><font><font>Datepicker</font></font></a></li><li><a href="http://keith-wood.name/flightBoard.html"><font><font>Vôo Board</font></font></a></li><li><a href="http://keith-wood.name/gChart.html"><font><font>Google Chart</font></font></a></li><li><a href="http://keith-wood.name/gsblogbar.html"><font><font>Google Search Blogbar</font></font></a></li><li><a href="http://keith-wood.name/gsbookbar.html"><font><font>Google Search Bookbar</font></font></a></li><li><a href="http://keith-wood.name/gsnewsbar.html"><font><font>Google Search Newsbar</font></font></a></li><li><a href="http://keith-wood.name/gsvideobar.html"><font><font>Google Search VideoBar</font></font></a></li></ul><ul><li><a href="http://keith-wood.name/icalendar.html"><font><font>iCalendar</font></font></a></li><li><a href="http://keith-wood.name/imageCube.html"><font><font>Cube imagem</font></font></a></li><li><a href="http://keith-wood.name/keypad.html"><font><font>Teclado</font></font></a></li><li><a href="http://keith-wood.name/labelEffect.html"><font><font>Efeito rótulo</font></font></a></li><li><a href="http://keith-wood.name/linkedSliders.html"><font><font>Sliders ligados</font></font></a></li><li><a href="http://keith-wood.name/localisation.html"><font><font>Localização</font></font></a></li><li><a href="http://keith-wood.name/maxlength.html"><font><font>Max Length</font></font></a></li><li><a href="http://keith-wood.name/more.html"><font><font>Mais</font></font></a></li><li><a href="http://keith-wood.name/realPerson.html"><font><font>Pessoa real</font></font></a></li><li><a href="http://keith-wood.name/relationships.html"><font><font>Relacionamentos</font></font></a></li><li><a href="http://keith-wood.name/signature.html"><font><font>Assinatura</font></font></a></li><li><a href="http://keith-wood.name/svg.html"><font><font>SVG Integração</font></font></a></li><li><a href="http://keith-wood.name/themes.html"><font><font>Temas</font></font></a></li><li><a href="http://keith-wood.name/timeEntry.html"><font><font>Tempo de entrada</font></font></a></li></ul></div><a href="http://keith-wood.name/kw-name.rss.xml"><img src="./Um quadro Plugin jQuery_files/rss.png" alt="RSS Feed" title="RSS Feed"></a></div><h1><font><font>Um quadro Plugin jQuery</font></font></h1>
</header>
<section>
<p><a href="http://jquery.com/"><font><font>jQuery</font></font></a><font><font> é uma biblioteca JavaScript que simplifica o desenvolvimento de páginas HTML. </font><font>Bem como toda a funcionalidade interna, jQuery é projetado para ser extensível, permitindo-nos aumentar a capacidade do jQuery no entanto queremos. </font><font>Nós podemos fornecer mais:</font></font></p>
<ul>
	<li><font><font>funções autônomas e objetos ($ xxx.);</font></font></li>
	<li><font><font>funções de selecção jQuery ($ fn.xxx.);</font></font></li>
	<li><font><font>seletores ($ expr.filters.xxx.);</font></font></li>
	<li><font><font>animações ($. fx.step.xxx).</font></font></li>
</ul>
<p><font><font>É a segunda categoria que é aqui examinada. </font><font>Mais plugins jQuery cair nesta rubrica, o que nos permite executar uma operação em um conjunto de elementos resultantes de uma seleção jQuery. </font><font>Embora existam muitos plugins de terceiros disponíveis, às vezes eles não fazem apenas o que queremos. </font><font>Podemos, então, ou atualizar um plugin existente ou escrever nosso próprio a partir do zero.</font></font></p>
<p><font><font>Este artigo descreve um quadro que tenho usado em muitos dos
	 </font></font><a href="http://keith-wood.name/index.html#jquery"><font><font>meus plugins</font></font></a><font><font> .</font></font></p>

<article>
<header><a name="case"></a><font><font>Estudo de Caso</font></font></header>
<p><font><font>Para tornar as coisas menos esotérica, vamos passar pelo processo de criação de um plugin real para mostrar como o quadro é aplicado.</font></font></p>
<p><font><font>Campos de entrada HTML têm um </font></font><code><font><font>maxlength</font></font></code><font><font> atributo para restringir o seu tamanho, mas textareas não. </font><font>Vamos criar um plugin para adicionar esta funcionalidade. </font><font>Nosso código final será algo parecido com isto:</font></font></p>
<pre class="ui-state-active"><code class="js"><font><font>$ (Selector) maxlength (. </font></font><span class="js__brace"><font><font>{</font></font></span><font><font> máx:&nbsp; </font></font><span class="js__num"><font><font>300 </font></font></span><span class="js__brace"><font><font>}</font></font></span><font><font> );</font></font></code></pre>
<p><font><font>Queremos ser capazes de definir o tamanho máximo permitido e fornecer feedback para o usuário, mostrando quantos caracteres são deixados. </font><font>Para isso, precisamos adicionar manipuladores de eventos para assistir teclas e adicionar conteúdo à página após o textarea. </font><font>Nós também precisamos permitir que as configurações sejam atualizadas on-the-fly, e ser capaz de remover a funcionalidade completamente. </font><font>E, finalmente, vamos adicionar uma maneira de recuperar as configurações atuais.</font></font></p>
<p><font><font>Como estamos desenvolvendo este plugin, queremos ter em mente os seguintes princípios:</font></font></p>
<ul>
	<li><font><font>Não confie em </font></font><code><font><font>$</font></font></code><font><font> sendo o mesmo que </font></font><code><font><font>jQuery</font></font></code><font><font> .</font></font></li>
	<li><font><font>Esconder os detalhes de implementação.</font></font></li>
	<li><font><font>Coloque tudo no objeto jQuery.</font></font></li>
	<li><font><font>Apenas reivindicar um único nome e usar isso para tudo.</font></font></li>
	<li><font><font>Retornar o objeto jQuery para encadear sempre que possível.</font></font></li>
	<li><font><font>Use </font></font><code><font><font>$. dados</font></font></code><font><font> para armazenar dados de instância.</font></font></li>
	<li><font><font>Passar comandos para a funcionalidade adicional, como por exemplo </font></font><code><font><font>$ (selector). xxx ("destruir")</font></font></code><font><font> .</font></font></li>
	<li><font><font>Antecipar personalizações.</font></font></li>
	<li><font><font>Use padrões sensíveis.</font></font></li>
	<li><font><font>Permitir a localização / localização.</font></font></li>
	<li><font><font>Teste sobre os principais navegadores: IE, Firefox, Safari, Opera, Chrome.</font></font></li>
	<li><font><font>Fornecer demonstrações e documentação.</font></font></li>
</ul>
</article>

<article>
<header><a name="invoke"></a><font><font>Primeiros Passos</font></font></header>
<p><font><font>O nome de arquivo preferido para um plugin é da forma </font></font><code><font><font>jquery.xxx.js</font></font></code><font><font> . </font><font>Devemos escolher um nome que reflete o propósito do plugin e que podemos usar todo, de acordo com o princípio de </font></font><em><font><font>apenas reivindicando um nome dentro do namespace jQuery</font></font></em><font><font> . </font><font>Usaremos 'maxlength' para este exemplo. </font><font>Usando apenas um único nome que reduzir a desordem dentro jQuery e também a possibilidade de conflito com outro plugin ou aprimoramentos futuros para si jQuery.</font></font></p>
<p><font><font>Cerque o código do plugin com o seguinte para garantir que </font></font><em><code><font><font>$</font></font></code><font><font> 
	é o mesmo que </font></font><code><font><font>jQuery</font></font></code></em><font><font> e </font></font><em><font><font>esconder os detalhes de implementação</font></font></em><font><font> :</font></font></p>
<pre class="ui-state-active"><code class="js"><font><font>( </font></font><span class="js__operator"><font><font>função</font></font></span><font><font> ($)&nbsp; </font></font><span class="js__brace"><font><font>{ </font></font></span>&nbsp;<span class="js__sl_comment"><font><font>/ / Hide escopo, no $ conflito </font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font><font>/ / Tudo o outro código ... </font></font></span>&nbsp;<br><span class="js__brace"><font><font>}</font></font></span><font><font> ) (jQuery);</font></font></code></pre>
<p><font><font>O que esta construção está a fazer é definir uma função inline, anônimo e logo em seguida chamando-o com um parâmetro de </font></font><code><font><font>jQuery</font></font></code><font><font> . </font><font>Uma vez que o nome do parâmetro na declaração da função é </font></font><code><font><font>$</font></font></code><font><font> 
	podemos usar com segurança </font></font><code><font><font>$</font></font></code><font><font> dentro do corpo da função sabendo que se refere ao objeto jQuery, conforme especificado pelo parâmetro, independentemente de qualquer outra coisa que possa ser na página.</font></font></p>
<p><font><font>Além disso, esconde que esta função seja o que contém do mundo exterior, exceto onde queremos expor especial functionalty, como a adição de nosso plugin para jQuery, como mostrado abaixo. </font><font>Assim, podemos declarar constantes e variáveis ​​locais dentro desta função que não vai interferir ou ser afetado por qualquer outra coisa na página.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__sl_comment"><font><font>/ / A lista de comandos que retornam valores e não permitem encadeamento </font></font></span>&nbsp;<br><span class="js__statement"><font><font>var</font></font></span><font><font> &nbsp;getters = [ </font></font><span class="js__string"><font><font>'settings'</font></font></span><font><font> ];&nbsp; </font><span class="js__ml_comment"><font>/ * Determinar se um método é um getter e não permite o encadeamento.&nbsp; </font></span><span class="js__ml_comment"><font>&nbsp;&nbsp;&nbsp;@ param método (string, opcional) o método para executar&nbsp; </font></span><span class="js__ml_comment"><font>&nbsp;&nbsp;&nbsp;@ otherArgs param ([], opcional) quaisquer outros argumentos para o método&nbsp; </font></span><span class="js__ml_comment"><font>&nbsp;&nbsp;&nbsp;@ return true se o método é um getter, false se não * / </font></span><span class="js__operator"><font>função</font></span><font> &nbsp;isNotChained (método, otherArgs)&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>se</font></span><font> &nbsp;(método ==&nbsp; </font><span class="js__string"><font>'option'</font></span><font> &nbsp;&amp;&amp; ( otherArgs.length ==&nbsp; </font><span class="js__num"><font>0</font></span><font> &nbsp;| |&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(otherArgs.length ==&nbsp; </font><span class="js__num"><font>1</font></span><font> &nbsp;&amp;&amp;&nbsp; </font><span class="js__operator"><font>typeof</font></span><font> &nbsp;otherArgs [ </font><span class="js__num"><font>0</font></span><font> ] ==&nbsp; </font><span class="js__string"><font>'string'</font></span><font> )))&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>retornar </font></span><span class="js__property"><font>verdadeiro</font></span><font> ;&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>retornar</font></span><font> &nbsp;$ inArray (método, getters)&gt; -. </font><span class="js__num"><font>1</font></span><font> ;&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__ml_comment"><font>/ * Fixe a funcionalidade comprimento máximo de uma seleção jQuery.&nbsp; </font></span><span class="js__ml_comment"><font>&nbsp;&nbsp;&nbsp;@ opções param (objeto) que as novas configurações usar para esses casos (opcional) ou&nbsp; </font></span><span class="js__ml_comment"><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(string) o método para executar (opcional)&nbsp; </font></span><span class="js__ml_comment"><font>&nbsp;&nbsp;&nbsp;@ return (jQuery) para encadeamento de novas chamadas ou&nbsp; </font></span><span class="js__ml_comment"><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(qualquer ) valor * / getter</font></span><font> . $ fn.maxlength =&nbsp; </font><span class="js__operator"><font>função</font></span><font> (opções)&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>var</font></span><font> &nbsp;otherArgs =&nbsp; </font><span class="js__object"><font>array</font></span><font> prototype.slice.call (. </font><span class="js__property"><font>argumentos</font></span><font> ,&nbsp; </font><span class="js__num"><font>um</font></span><font> );&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(isNotChained (opções, otherArgs))&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>retorno</font></span><font> &nbsp;do plugin [ </font><span class="js__string"><font>'_'</font></span><font> &nbsp;+ opções +&nbsp; </font><span class="js__string"><font>'Plugin'</font></span><font> ] aplicar (plugin, [. </font><span class="js__operator"><font>este</font></span><font> [ </font><span class="js__num"><font>0</font></span><font> ]] concat (otherArgs).);&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>retornar </font></span><span class="js__operator"><font>este</font></span><font> . cada ( </font><span class="js__operator"><font>função</font></span><font> ()&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>se</font></span><font> &nbsp;( </font><span class="js__operator"><font>typeof</font></span><font> &nbsp;opções ==&nbsp; </font><span class="js__string"><font>'string'</font></span><font> )&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>se</font></span><font> &nbsp;! (plugin [ </font><span class="js__string"><font>' _ '</font></span><font> &nbsp;+ opções +&nbsp; </font><span class="js__string"><font>'Plugin'</font></span><font> ])&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>lançar </font></span><span class="js__string"><font>"método desconhecido:"</font></span><font> &nbsp;+ opções;&nbsp; </font><span class="js__brace"><font>}</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plug-in [ </font><span class="js__string"><font>'_'</font></span><font> &nbsp;+ opções +&nbsp; </font><span class="js__string"><font>'Plugin'</font></span><font> .] aplicar (plugin, [ </font><span class="js__operator"><font>isso</font></span><font> .] concat (otherArgs));&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>mais </font></span><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plugin._attachPlugin ( </font><span class="js__operator"><font>este</font></span><font> , opções | |&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__brace"><font>}</font></span><font> );&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__brace"><font>}</font></span><font> );&nbsp; </font><span class="js__brace"><font>}</font></span><font> ;</font></font><br>&nbsp;<br><span class="js__ml_comment"><font></font><br><font></font><br><font></font><br><font></font></span>&nbsp;<br><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><br><font></font><span class="js__num"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__property"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><br><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;<br><span class="js__ml_comment"><font></font><br><font></font><br><font></font><br><font></font><br><font></font></span>&nbsp;<br><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__object"><font></font></span><font></font><span class="js__property"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span><span class="js__brace"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><br><span class="js__brace"><font></font></span><font></font></code></pre>
<p><font><font>Aqui estamos definindo nosso plugin função, </font></font><code><font><font>maxlength</font></font></code><font><font> , como uma extensão do </font></font><code><font><font>$. fn</font></font></code><font><font> , o conjunto de funções de seleção. </font><font>Este é o único nome que estamos reivindicando dentro jQuery. </font><font>Geralmente, nós aplicamos a funcionalidade solicitada a cada um dos elementos da seleção atual e retornar o resultado da </font></font><code><font><font>cada</font></font></code><font><font> 
	chamada, como resultado de nossa nova função, cumprindo assim o princípio de </font></font><em><font><font>permitir chamadas jQuery para ser preso</font></font></em><font><font> sempre que possível.</font></font></p>
<p><font><font>Nossa função toma pelo menos um parâmetro: </font></font><code><font><font>opções</font></font></code><font><font> . </font><font>Quando inicialmente anexando a funcionalidade deste parâmetro é um objeto contendo as configurações ou não está presente em tudo. </font><font>Em todos os outros casos, será um valor string que identifica um comando para executar e pode ser seguido por outros parâmetros para esse comando.</font></font></p>
<p><font><font>Em primeiro lugar, verificar se um comando é especificado que retorna um valor que nos impede de encadeamento de chamadas de função jQuery adicionais ( </font></font><code><font><font>isNotChained</font></font></code><font><font> ). </font><font>Na maioria dos plugins, a " </font></font><code><font><font>opção de</font></font></code><font><font> comando 'pode retornar o conjunto atual de opções utilizadas pelo plugin. </font><font>Caso contrário, verifique a lista de comandos getter conhecidos. </font><font>Se este for um tal comando, nós construímos o nome do método de destino com base no comando e retornar o valor de chamá-la, passando uma referência para o primeiro dos elementos seleccionados juntamente com o restante dos argumentos como parâmetros.</font></font></p>
<p><font><font>Caso contrário, dependendo se estamos inicializar o plugin ou o processamento de um comando, que quer chamar </font></font><code><font><font>_attachPlugin</font></font></code><font><font> diretamente ou construir o nome do método de destino baseado no comando ( </font></font><code><font><font>_xxxPlugin</font></font></code><font><font> ) e chamar isso. </font><font>Neste último caso, também repassar quaisquer outros parâmetros que podem ter sido passados ​​para a chamada original, usando a matriz
	 </font></font><code><font><font>fatia</font></font></code><font><font> função para extrair aqueles após o comando ea
	 </font></font><code><font><font>aplicar</font></font></code><font><font> chamar para passá-los. </font><font>Para ambas as variações também passar ao longo de uma referência ao elemento do actual como o primeiro parâmetro. </font><font>A </font></font><code><font><font>opção | | {}</font></font></code><font><font> construção assegura que um </font></font><code><font><font>nulo</font></font></code><font><font> 
	objeto opções não é transmitido ao longo do resto do código.</font></font></p>
</article>

<article>
<header><a name="manager"></a><font><font>Singleton Gerente</font></font></header>
<p><font><font>Ter um único objeto para gerenciar as interações para o plugin nos permite centralizar o processamento. </font><font>Estamos novamente usando nosso nome pedida para este objeto e estão criando dentro do próprio objeto jQuery. </font><font>Poderíamos criar o gerenciador de fora do jQuery, mas que iria atravancar o espaço global e introduzir mais oportunidades de conflitos com outras funcionalidades JavaScript. </font><font>Na </font></font><a href="http://keith-wood.name/pluginFramework.html#invoke"><font><font>invocação</font></font></a><font><font> código que fizeram uso deste objeto ao redirecionar as chamadas recebidas e desde que o contexto, passando ao longo do elemento de destino como parâmetro. </font><font>O objeto também pode servir como um repositório de configurações globais que se aplicam a todas as instâncias do plugin em uso ( </font></font><code><font><font>_defaults</font></font></code><font><font> ).</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__ml_comment"><font><font>/ * Gerente Max comprimento. </font><font class="">* / </font></font></span>&nbsp;<br><span class="js__operator"><font><font class="">função</font></font></span><font><font class=""> &nbsp;MaxLength ()&nbsp; </font></font><span class="js__brace"><font><font class="">{ </font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__operator"><font><font class="">este</font></font></span><font><font class=""> regionais = [];.&nbsp; </font></font><span class="js__sl_comment"><font><font class="">/ configurações regionais / disponíveis, indexados pelo código de idioma </font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__operator"><font><font class="">esta</font></font></span><font><font class=""> regionais [. </font></font><span class="js__string"><font><font class="">''</font></font></span><font><font class=""> ] =&nbsp; </font></font><span class="js__brace"><font><font class="">{ </font></font></span>&nbsp;<span class="js__sl_comment"><font><font class="">/ / Default configurações regionais</font></font></span>&nbsp;<br><font><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;feedbackText:&nbsp; </font></font><span class="js__string"><font><font class="">'{r} caracteres remanescentes ({m} máximo) "</font></font></span><font><font class=""> ,&nbsp; </font><span class="js__sl_comment"><font class="">texto / / Display para mensagem feedback, use {r} para os personagens restantes, </font></span><span class="js__sl_comment"><font class="">/ / {c} para caracteres digitados, {m} para o máximo</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflowText:&nbsp; </font><span class="js__string"><font class="">'{o} caracteres demais ({m} máximo) " </font></span><span class="js__sl_comment"><font class="">/ / Exibe texto quando máximo passado, use substituições acima </font></span><span class="js__sl_comment"><font class="">/ / e {o} para personagens do passado máximo </font></span><span class="js__brace"><font class="">}</font></span><font class=""> ;&nbsp; </font><span class="js__operator"><font class="">esta</font></span><font class=""> _defaults. =&nbsp; </font><span class="js__brace"><font class="">{</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max:&nbsp; </font><span class="js__num"><font class="">200</font></span><font class=""> ,&nbsp; </font><span class="js__sl_comment"><font class="">comprimento / / Máximo</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;truncate:&nbsp; </font><span class="js__property"><font class="">verdade</font></span><font class=""> ,&nbsp; </font><span class="js__sl_comment"><font class="">/ / true para impedir ainda mais a entrada, falso destacar apenas</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showFeedback:&nbsp; </font><span class="js__property"><font class="">verdade</font></span><font class=""> ,&nbsp; </font><span class="js__sl_comment"><font class="">/ / true para mostrar sempre o feedback do usuário, "ativo" para pairar / focar apenas</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;feedbackTarget:&nbsp; </font><span class="js__property"><font class="">nulo</font></span><font class=""> ,&nbsp; </font><span class="js__sl_comment"><font class="">selector / / jQuery ou função para o elemento para preencher com feedback</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onFull: null / / Callback, quando completo ou transbordamento,&nbsp; </font><span class="js__sl_comment"><font class="">/ / recebe um parâmetro: true se transbordar, false se não </font></span><span class="js__brace"><font class="">}</font></span><font class=""> ;&nbsp; </font><font class="">&nbsp;&nbsp;&nbsp;&nbsp;$ estender (. </font><span class="js__operator"><font class="">este</font></span><font class=""> _defaults,.&nbsp; </font><span class="js__operator"><font class="">esta</font></span><font class=""> regionais [. </font><span class="js__string"><font class="">''</font></span><font class=""> ]);&nbsp; </font><span class="js__brace"><font class="">}</font></span><font class=""> $ estender (MaxLength.prototype,.&nbsp; </font><span class="js__brace"><font class="">{ </font></span><span class="js__ml_comment"><font class="">/ * nome da classe adicionado elementos para indicam já configurado com comprimento máximo * /.</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;markerClassName:&nbsp; </font><span class="js__string"><font class="">'hasMaxLength'</font></span><font class=""> ,&nbsp; </font><span class="js__ml_comment"><font class="">/ * Nome da propriedade de dados para as configurações de exemplo * /.</font></span><font class=""> &nbsp;&nbsp;&nbsp;&nbsp;propertyName:&nbsp; </font><span class="js__string"><font class="">'maxlength'</font></span><font class=""> ,&nbsp; </font><span class="js__sl_comment"><font class="">/ / Outras funções e variáveis ​​aqui ... </font></span><span class="js__brace"><font class="">}</font></span><font class=""> );&nbsp; </font><span class="js__ml_comment"><font class="">/ * inicializar a funcionalidade comprimento máximo. </font></span><span class="js__ml_comment"><font>* / </font></span><span class="js__statement"><font>var</font></span><font> &nbsp;plug-in = $ maxlength =.&nbsp; </font><span class="js__operator"><font>nova</font></span><font> &nbsp;MaxLength ();&nbsp; </font><span class="js__sl_comment"><font>instância / / Singleton</font></span></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__num"><font></font></span><font></font><span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><span class="js__property"><font></font></span><font></font><span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><span class="js__property"><font></font></span><font></font><span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><span class="js__property"><font></font></span><font></font><span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;<br><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__ml_comment"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__ml_comment"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br><span class="js__brace"><font></font></span><font></font><br>&nbsp;<br><span class="js__ml_comment"><font></font></span>&nbsp;<br><span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__sl_comment"><font></font></span></code></pre>
<p><font><font>Nossas configurações incluem o texto a ser exibido para o retorno normal ( </font></font><code><font><font>feedbackText</font></font></code><font><font> ), o texto a ser exibido para o feedback estouro ( </font></font><code><font><font>overflowText</font></font></code><font><font> ), o tamanho máximo permitido ( </font></font><code><font><font>máximo</font></font></code><font><font> ), se deve ou não evitar a entrada depois de atingir o valor máximo ( </font></font><code><font><font>truncada</font></font></code><font><font> ), se ou não para mostrar o número de caracteres restantes ( </font></font><code><font><font>showFeedback</font></font></code><font><font> ), a identidade de um controle opcional para conter qualquer feedback ( </font></font><code><font><font>feedbackTarget</font></font></code><font><font> ) e um callback que é acionado quando o textarea preenche ou overflows ( </font></font><code><font><font>onFull</font></font></code><font><font> ). </font><font>As primeiras duas são separados em uma </font></font><code><font><font>região</font></font></code><font><font> de matriz que é indexado por língua para permitir a localização.</font></font></p>
<p><font><font>Estas são as definições que podemos ver os usuários que querem mudar - </font></font><em><font><font>antecipando personalização</font></font></em><font><font> . </font><font>Valores padrão razoáveis ​​são escolhidos, embora seja provável que o número máximo de caracteres que precisam ser alterados com freqüência.
	 </font></font><em><font><font>Fornecer padrões sensíveis</font></font></em><font><font> permite a funcionalidade do plugin para ser facilmente adicionado a uma página e tê-lo trabalhar of-the-box. </font><font>Tendo o texto feedback como um ajuste torna mais fácil para os outros a alterá-lo ou traduzi-lo em uma outra língua sem afetar o functionalty subjacente, enquanto estiver usando pontos de substituição em que nos permite inserir os valores atuais nos lugares apropriados, independentemente do seu fim ou a linguagem utilizada.</font></font></p>
<p><font><font>O resto do código é adicionado à </font></font><code><font><font>MaxLength.prototype</font></font></code><font><font> 
	permitindo-lhe ser acedido a partir de todas as </font></font><code><font><font>MaxLength</font></font></code><font><font> objectos. </font><font>Nós adicionamos uma função que permite a substituição dos padrões globais, que atualiza o conjunto de configurações padrão e retornos.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__ml_comment"><font><font>. / * Substituir as configurações padrão para todas as instâncias comprimento máximo&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ opções param (objeto) que as novas configurações usar como padrão&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ return (MaxLength) este objeto * /</font></font></span>&nbsp;<br><font><font> setDefaults:&nbsp; </font></font><span class="js__operator"><font><font>função</font></font></span><font><font> (options)&nbsp; </font></font><span class="js__brace"><font><font>{</font></font></span>&nbsp;<br><font><font> &nbsp;&nbsp;&nbsp;&nbsp;$. estender ( </font></font><span class="js__operator"><font><font>este</font></font></span><font><font> _defaults, opções. | |&nbsp; </font></font><span class="js__brace"><font><font>{ </font></font></span><span class="js__brace"><font><font>}</font></font></span><font><font> );&nbsp; </font><span class="js__statement"><font>retornar </font></span><span class="js__operator"><font>este</font></span><font> ;&nbsp; </font><span class="js__brace"><font>}</font></span><font> ,</font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__operator"><font></font></span><font></font><br><span class="js__brace"><font></font></span><font></font></code></pre>
</article>

<article>
<header><a name="attach"></a><font><font>Acessório</font></font></header>
<p><font><font class="goog-text-highlight">Quando inicialmente anexando a funcionalidade que precisamos ligar eventos e salvar as configurações para a instância corrente de campo. </font><font>Nós adicionamos uma classe marcador para o elemento de destino para indicar que ele foi processado por este plugin. </font><font>Se ele já passou pela etapa de fixação que ignorá-la em chamadas subseqüentes. </font><font>Esta abordagem torna mais fácil para atingir múltiplas, possivelmente novo, as ocorrências em uma página, sem afetar o que se passou antes.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__ml_comment"><font><font>/ * Coloque a funcionalidade comprimento máximo de um textarea.&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ param alvo (elemento) o controle de afetar&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ opções param (objeto) as opções personalizadas para presente * / instância</font></font></span>&nbsp;<br><font><font> _attachPlugin:&nbsp; </font></font><span class="js__operator"><font><font>função</font></font></span><font><font> (target, options)&nbsp; </font></font><span class="js__brace"><font><font>{</font></font></span>&nbsp;<br><font><font> &nbsp;&nbsp;&nbsp;&nbsp;target = $ (target) ;&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(target.hasClass ( </font><span class="js__operator"><font>este</font></span><font> markerClassName).)&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>retorno</font></span><font> ;&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>var</font></span><font> &nbsp;inst =&nbsp; </font><span class="js__brace"><font>{</font></span><font> opções: $ (. estendem </font><span class="js__brace"><font>{ </font></span><span class="js__brace"><font>}</font></span><font> ,&nbsp; </font><span class="js__operator"><font>esta</font></span><font> _defaults.), feedbackTarget: $ ([]) </font><span class="js__brace"><font>}</font></span><font> ;&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;target.addClass ( </font><span class="js__operator"><font>este</font></span><font> . markerClassName ).&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dados ( </font><span class="js__operator"><font>este</font></span><font> . propertyName,&nbsp;</font><font>&nbsp;=&nbsp; </font><span class="js__object"><font>Cordas</font></span><font> . fromCharCode (&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.charCode ==&nbsp; </font><span class="js__property"><font>indefinido</font></span><font> &nbsp;event.keyCode: event.charCode?),&nbsp; </font><span class="js__statement"><font>retorno</font></span><font> &nbsp;(event.ctrlKey | | event.metaKey | | ch ==&nbsp; </font><span class="js__string"><font>'\ u0000'</font></span><font> &nbsp;| |&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ ( </font><span class="js__operator"><font>este</font></span><font> ) val (). . comprimento &lt;&nbsp;</font><font>opções);&nbsp; </font><span class="js__brace"><font>}</font></span><font> ,</font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><span class="js__brace"><font></font></span><span class="js__brace"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__property"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__object"><font></font></span><font></font><br><font></font><span class="js__property"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__operator"><font></font></span><font></font><br><span class="js__brace"><font></font></span><font></font></code></pre>
<p><font><font>Ao vincular os eventos que estão interessados ​​em que o elemento alvo, usamos eventos namespace ( </font></font><code><font><font>xxx.maxlength</font></font></code><font><font> , mais uma vez, usando o único nome reclamada jQuery). </font><font>Isto torna mais fácil de distinguir os nossos eventos de outros que podem ser associadas ao mesmo elemento, especialmente quando se trata de </font></font><a href="http://keith-wood.name/pluginFramework.html#destroy"><font><font>retirá-los</font></font></a><font><font> novamente.</font></font></p>
<p><font><font>As configurações para essa instância do plugin são inicializados através da criação de um novo objeto de configurações vazio e estendendo-o com os padrões globais. </font><font>Estes por sua vez, ser substituído por quaisquer configurações locais no
	 </font></font><a href="http://keith-wood.name/pluginFramework.html#change"><code><font><font>_optionPlugin</font></font></code></a><font><font> função. </font><font>As configurações estão ligadas ao elemento de destino através do jQuery </font></font><code><font><font>$ dados.</font></font></code><font><font> mecanismo - uma vez mais, usando o nosso nome reclamado ( </font></font><code><font><font>this.propertyName</font></font></code><font><font> ).</font></font></p>
</article>
	
<article>
<header><a name="change"></a><font><font>Alterar Configurações</font></font></header>
<p><font><font>Um requisito comum é ser capaz de mudar as configurações em um controle após a funcionalidade plugin foi anexado a ele. </font><font>Usando o comando 'option' que permitem que um grupo de configurações (como um objeto) ou uma única configuração chamado e valor a ser atualizado. </font><font>Se for utilizado, o último formato, é convertido para o antigo antes que o processamento continua. </font><font>Esta função também é reutilizado quando
	 </font></font><a href="http://keith-wood.name/pluginFramework.html#attach"><font><font>anexando</font></font></a><font><font> a funcionalidade em primeiro lugar para inicializar o controle.</font></font></p>
<p><font><font>O comando 'option' também é usado para recuperar um ou todos os valores de configuração para uma determinada instância. </font><font>Esta situação é identificada pelo número e tipo de parâmetros fornecidos para a chamada e é tratado em primeiro lugar o código abaixo.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__ml_comment"><font><font>/ * Recuperar ou redefinir as configurações para um controle.&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ param alvo (elemento) o controle de afetar&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ opções param (objeto) as novas opções para essa instância ou&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(string) um nome de propriedade individual&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ param valor (qualquer) a propriedade individual valor (omitir se opções&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;é um objeto ou para recuperar o valor de uma configuração)&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ return (qualquer) se recuperar um valor * /</font></font></span>&nbsp;<br><font><font> _optionPlugin:&nbsp; </font></font><span class="js__operator"><font><font>função</font></font></span><font><font> (destino, opções, valor)&nbsp; </font></font><span class="js__brace"><font><font>{</font></font></span>&nbsp;<br><font><font> &nbsp;&nbsp;&nbsp;&nbsp;target = $ (target);&nbsp; </font><span class="js__statement"><font>var</font></span><font> &nbsp;inst = target de dados (. </font><span class="js__operator"><font>este</font></span><font> ; propertyName).&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;| (Opções | (! </font><span class="js__operator"><font>typeof</font></span><font> &nbsp;opções ==&nbsp; </font><span class="js__string"><font>'string'</font></span><font> &nbsp;&amp;&amp; valor ==&nbsp; </font><span class="js__property"><font>nulo</font></span><font> ))&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__sl_comment"><font>/ / obtém opção </font></span><span class="js__statement"><font>var</font></span><font> &nbsp;name = opções,&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options = (inst | |&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__brace"><font>}</font></span><font> ). opções ,&nbsp; </font><span class="js__statement"><font>retorno</font></span><font> &nbsp;(opções &amp;&amp; nome opções [nome]:? opções);&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>se</font></span><font> &nbsp;(! target.hasClass ( </font><span class="js__operator"><font>este</font></span><font> . markerClassName))&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>retorno</font></span><font> ;&nbsp; </font><span class="js__brace"><font>}</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;options = opções | |&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__brace"><font>}</font></span><font> ;&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;( </font><span class="js__operator"><font>typeof</font></span><font> &nbsp;opções ==&nbsp; </font><span class="js__string"><font>'string'</font></span><font> )&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>var</font></span><font> &nbsp;name = opções,&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options =&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__brace"><font>}</font></span><font> ;&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opções [nome] = valor;&nbsp; </font><span class="js__brace"><font>}</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;$ estender (inst.options, opções);.&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(inst.feedbackTarget.length&gt;&nbsp; </font><span class="js__num"><font>0</font></span><font> )&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__sl_comment"><font>/ / Remove o feedback de idade </font></span><font>+&nbsp; </font><span class="js__string"><font>''</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> _fullClass +.&nbsp; </font><span class="js__string"><font>'</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> _overflowClass);.&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>mais </font></span><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget.remove ();&nbsp; </font><span class="js__brace"><font>}</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget = $ ([]);&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>se</font></span><font> &nbsp;(inst.options.showFeedback)&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__sl_comment"><font>/ / Adicionar novo elemento de feedback</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.hadFeedbackTarget = inst.options.feedbackTarget;!&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(. $ isFunction (inst.options.feedbackTarget))&nbsp; </font><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget = inst.options.feedbackTarget.apply (target [ </font><span class="js__num"><font>0</font></span><font> ], []) ;&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>mais </font></span><span class="js__statement"><font>se</font></span><font> &nbsp;(inst.options.feedbackTarget)&nbsp; </font><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget = $ (inst.options.feedbackTarget);&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>mais </font></span><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget = </font><font>+&nbsp; </font><span class="js__string"><font>'foco'.</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> propertyName +.&nbsp; </font><span class="js__string"><font>'mouseout.</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> propertyName +.&nbsp; </font><span class="js__string"><font>"borrão".</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> propertyName);.&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(inst.options.showFeedback ==&nbsp; </font><span class="js__string"><font>'ativo'</font></span><font> )&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__sl_comment"><font>/ / evento Adicionais</font></span></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__property"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br><font></font><span class="js__brace"><font></font></span><span class="js__brace"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__brace"><font></font></span><span class="js__brace"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br><font></font><span class="js__brace"><font></font></span><span class="js__brace"><font></font></span><font></font><br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__num"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__property"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__property"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__operator"><font></font></span><font></font><br><span class="js__brace"><font></font></span><font></font></code></pre>
<p><font><font>Nós recuperar as configurações existentes para o controle (usando </font></font><code><font><font>$. dados</font></font></code><font><font> ) e estendê-los com as novas configurações. </font><font>Em seguida, com base nas novas configurações, atualizamos o controle e seus elementos associados antes de chamar a </font></font><a href="http://keith-wood.name/pluginFramework.html#body"><font><font>função do corpo</font></font></a><font><font> 
	para verificar o comprimento e, assim, aplicar as novas configurações.</font></font></p>
<p><font><font>O código acima é invocado com o comando abaixo, que a </font></font><a href="http://keith-wood.name/pluginFramework.html#invoke"><font><font>
	principal função</font></font></a><font><font> redireciona construindo o nome do método a ser chamado.</font></font></p>
<pre class="ui-state-active"><code class="js"><font><font>$ (Selector) maxlength (. </font></font><span class="js__string"><font><font>'option'</font></font></span><font><font> ,&nbsp; </font></font><span class="js__brace"><font><font>{</font></font></span><font><font> ... </font></font><span class="js__brace"><font><font>}</font></font></span><font><font> );</font></font></code></pre>
</article>

<article>
<header><a name="body"></a><font><font>Corpo</font></font></header>
<p><font><font>Finalmente chegamos à carne deste plugin - a verificação real do tamanho do campo e atualizar qualquer feedback. </font><font>Nós recuperar as configurações para o campo (a partir de
	 </font></font><code><font><font>$. dados</font></font></code><font><font> ) e truncar o conteúdo, se exceder o comprimento especificado. </font><font>Então qualquer campo de feedback é atualizado pela substituição no texto dado os valores atuais para as diversas medidas. </font><font>É claro que estamos usando a funcionalidade jQuery para realizar essas mudanças.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__ml_comment"><font><font>/ * Verificar o comprimento do texto e notificar em conformidade.&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ param alvo (jQuery) de controle para verificar * /</font></font></span>&nbsp;<br><font><font> _checkLength:&nbsp; </font></font><span class="js__operator"><font><font>função</font></font></span><font><font> (target)&nbsp; </font></font><span class="js__brace"><font><font>{ </font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font><font>var</font></font></span><font><font> &nbsp;inst = target.data ( </font></font><span class="js__operator"><font><font>este</font></font></span><font><font> propertyName.);&nbsp; </font><span class="js__statement"><font>var</font></span><font> &nbsp;valor = target.val ( );&nbsp; </font><span class="js__statement"><font>var</font></span><font> &nbsp;len = value.replace ( </font><span class="js__reg_exp"><font>/ \ r \ n / g</font></span><font> ,&nbsp; </font><span class="js__string"><font>'~ ~'</font></span><font> ). replace ( </font><span class="js__reg_exp"><font>/ \ n / g</font></span><font> ,&nbsp; </font><span class="js__string"><font>'~ ~'</font></span><font> ). comprimento;&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;target.toggleClass ( </font><span class="js__operator"><font>este</font></span><font> _fullClass, len&gt; =. . inst.options.max)&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleClass ( </font><span class="js__operator"><font>este</font></span><font> _overflowClass, len&gt; inst.options.max);.&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(len&gt; inst.options.max &amp;&amp; inst.options.truncate)&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__sl_comment"><font>/ / truncamento </font></span><span class="js__statement"><font>var</font></span><font> &nbsp;lines = target.val () . split ( </font><span class="js__reg_exp"><font>/ \ r \ n | \ n /</font></span><font> ),&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;valor =&nbsp; </font><span class="js__string"><font>''</font></span><font> ;&nbsp; </font><span class="js__statement"><font>var</font></span><font> &nbsp;i =&nbsp; </font><span class="js__num"><font>0</font></span><font> ;&nbsp; </font><span class="js__statement"><font>enquanto</font></span><font> &nbsp;(value.length &lt;inst.options.max &amp;&amp; i &lt;lines.length)&nbsp; </font><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;valor + = linhas [i] . substring ( </font><span class="js__num"><font>0</font></span><font> , inst.options.max - value.length) +&nbsp; </font><span class="js__string"><font>'\ r \ n'</font></span><font> ;&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i + +;&nbsp; </font><span class="js__brace"><font>}</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.val (value.substring ( </font><span class="js__num"><font>0</font></span><font> , inst.options.max));&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alvo [ </font><span class="js__num"><font>0</font></span><font> ]. scrollTop target = [ </font><span class="js__num"><font>0</font></span><font> ] scrollHeight;.&nbsp; </font><span class="js__sl_comment"><font>/ / Scroll para baixo</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = inst.options.max;&nbsp; </font><span class="js__brace"><font>}</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget.toggleClass ( </font><span class="js__operator"><font>este</font></span><font> .. _fullClass, len&gt; = inst.options.max)&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleClass ( </font><span class="js__operator"><font>este</font></span><font> . _overflowClass, len&gt; inst.options.max);&nbsp; </font><span class="js__statement"><font>var</font></span><font> &nbsp;retorno = (len&gt; inst.options.max?&nbsp; </font><span class="js__sl_comment"><font>/ / Feedback</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.options.overflowText:. inst.options.feedbackText)&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replace ( </font><span class="js__reg_exp"><font>/ \ c {\} /</font></span><font> ., len) substituir ( </font><span class="js__reg_exp"><font>/ \ {m \} /</font></span><font> , inst.options.max).&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replace ( </font><span class="js__reg_exp"><font>/ \ {r \} /</font></span><font> , inst.options.max -. len)&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replace ( </font><span class="js__reg_exp"><font>/ \ {o \} /</font></span><font> , len - inst.options. max);&nbsp; </font><span class="js__statement"><font>tentar </font></span><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget.text (feedback);&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>captura</font></span><font> (e)&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__sl_comment"><font>/ / Ignorar </font></span><span class="js__brace"><font>} </font></span><span class="js__statement"><font>try </font></span><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget.val (feedback);&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>captura</font></span><font> (e)&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__sl_comment"><font>/ / Ignorar </font></span><span class="js__brace"><font>} </font></span><span class="js__statement"><font>se</font></span><font> &nbsp;(len&gt; = inst.options.max &amp;&amp; $ isFunction (inst.options.onFull)).&nbsp; </font><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.options.onFull.apply (target [len&gt; inst.options.max]);&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__brace"><font>}</font></span><font> ,</font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__reg_exp"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__reg_exp"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__reg_exp"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__num"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__num"><font></font></span><font></font><br><font></font><span class="js__num"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__operator"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__sl_comment"><font></font></span>&nbsp;<br><font></font><br><font></font><span class="js__reg_exp"><font></font></span><font></font><span class="js__reg_exp"><font></font></span><font></font><br><font></font><span class="js__reg_exp"><font></font></span><font></font><br><font></font><span class="js__reg_exp"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__sl_comment"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><span class="js__brace"><font></font></span><font></font></code></pre>
<p><font><font>Este código é chamado em resposta a </font></font><a href="http://keith-wood.name/pluginFramework.html#attach"><font><font>qualquer tecla</font></font></a><font><font> dentro do campo ou quando as configurações para o campo ter </font></font><a href="http://keith-wood.name/pluginFramework.html#change"><font><font>mudado</font></font></a><font><font> .</font></font></p>
</article>

<article>
<header><a name="length"></a><font><font>Atual Comprimento</font></font></header>
<p><font><font>O ' </font></font><code><font><font>curLength</font></font></code><font><font> comando 'difere dos outros na medida em que retorna um valor e não permite o encadeamento de outras funções jQuery. </font><font>Neste caso, ele retorna um objeto com atributos para o número de caracteres inseridos ( </font></font><code><font><font>usado</font></font></code><font><font> ) e o número de caracteres restantes ( </font></font><code><font><font>restante</font></font></code><font><font> ) para uma dada área de texto.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__ml_comment"><font><font>/ * Recuperar a contagem de caracteres usados ​​eo restante.&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ param alvo (jQuery) de controle para verificar&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ return (object) as contagens atuais com os atributos usados ​​e restante * /</font></font></span>&nbsp;<br><font><font> _curLengthPlugin:&nbsp; </font></font><span class="js__operator"><font><font>função</font></font></span><font><font> (target)&nbsp; </font></font><span class="js__brace"><font><font>{ </font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font><font>var</font></font></span><font><font> &nbsp;inst target.data = ( </font></font><span class="js__operator"><font><font>este</font></font></span><font><font> . propertyName);&nbsp; </font><span class="js__statement"><font>var</font></span><font> &nbsp;valor = target.val ();&nbsp; </font><span class="js__statement"><font>var</font></span><font> &nbsp;len = value.replace ( </font><span class="js__reg_exp"><font>/ \ r \ n / g</font></span><font> ,&nbsp; </font><span class="js__string"><font>'~ ~'</font></span><font> ). replace ( </font><span class="js__reg_exp"><font>/ \ n / g</font></span><font> ,&nbsp; </font><span class="js__string"><font>'~ ~'</font></span><font> ). comprimento ,&nbsp; </font><span class="js__statement"><font>retorno </font></span><span class="js__brace"><font>{</font></span><font> usado: len, restante: inst.options.max - len </font><span class="js__brace"><font>}</font></span><font> ;&nbsp; </font><span class="js__brace"><font>}</font></span><font> ,</font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__reg_exp"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__reg_exp"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__brace"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><br><span class="js__brace"><font></font></span><font></font></code></pre>
<p><font><font>O código acima é invocado com o comando abaixo, que a </font></font><a href="http://keith-wood.name/pluginFramework.html#invoke"><font><font>
	principal função</font></font></a><font><font> redireciona construindo o nome do método a ser chamado.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__statement"><font><font>var</font></font></span><font><font> &nbsp;comprimentos = $ (selector) maxlength (. </font></font><span class="js__string"><font><font>'curLength'</font></font></span><font><font> );</font></font></code></pre>
</article>

<article>
<header><a name="destroy"></a><font><font>Destruição</font></font></header>
<p><font><font>Um dos comandos básicos que todos os plugins devem implementar é a capacidade de remover todas as funcionalidades que foi adicionado (eventos, marcação e configurações) e retornar o DOM para o estado em que estava antes de o plugin foi chamado. </font><font>Remoção de todos os eventos que foram adicionados é extremamente simples, devido ao uso de um namespace quando
	 </font></font><a href="http://keith-wood.name/pluginFramework.html#attach"><font><font>adicioná-los</font></font></a><font><font> - apenas desvincular tudo dentro desse namespace. </font><font>Isso deixa quaisquer outros eventos ligados aos controles afetados intactas.</font></font></p>
<pre class="ui-state-active"><code class="js"><span class="js__ml_comment"><font><font>/ * Remover a funcionalidade plug-in a partir de um controle.&nbsp; </font></font><br><font><font>&nbsp;&nbsp;&nbsp;@ param alvo (elemento) o controle de afetar * /</font></font></span>&nbsp;<br><font><font> _destroyPlugin:&nbsp; </font></font><span class="js__operator"><font><font>função</font></font></span><font><font> (target)&nbsp; </font></font><span class="js__brace"><font><font>{</font></font></span>&nbsp;<br><font><font> &nbsp;&nbsp;&nbsp;&nbsp;; target = $ (target)&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(! target.hasClass ( </font><span class="js__operator"><font>este</font></span><font> . markerClassName))&nbsp; </font><span class="js__brace"><font>{ </font></span><span class="js__statement"><font>retorno</font></span><font> ;&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>var</font></span><font> &nbsp;inst = target.data ( </font><span class="js__operator"><font>este</font></span><font> propertyName.);&nbsp; </font><span class="js__statement"><font>se</font></span><font> &nbsp;(inst.feedbackTarget.length&nbsp;</font><font>+&nbsp; </font><span class="js__string"><font>''</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> _fullClass +.&nbsp; </font><span class="js__string"><font>'</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> _overflowClass);.&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__statement"><font>mais </font></span><span class="js__brace"><font>{</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inst.feedbackTarget.remove ();&nbsp; </font><span class="js__brace"><font>} </font></span><span class="js__brace"><font>}</font></span><font> &nbsp;&nbsp;&nbsp;&nbsp;target.removeClass ( </font><span class="js__operator"><font>este</font></span><font> markerClassName +.&nbsp; </font><span class="js__string"><font>'</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> _fullClass +.&nbsp; </font><span class="js__string"><font>'</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> _overflowClass. .)&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeData ( </font><span class="js__operator"><font>este</font></span><font> .. propertyName)&nbsp; </font><font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;desvincular ( </font><span class="js__string"><font>'.'</font></span><font> &nbsp;+&nbsp; </font><span class="js__operator"><font>esta</font></span><font> propertyName);.&nbsp; </font><span class="js__brace"><font>}</font></span></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span><font></font><span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__statement"><font></font></span>&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__brace"><font></font></span>&nbsp;<br><font></font><span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="js__operator"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br><font></font><span class="js__operator"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__operator"><font></font></span><font></font><br><span class="js__brace"><font></font></span></code></pre>
<p><font><font>O código acima é invocado com o comando abaixo, que a </font></font><a href="http://keith-wood.name/pluginFramework.html#invoke"><font><font>
	principal função</font></font></a><font><font> redireciona construindo o nome do método a ser chamado.</font></font></p>
<pre class="ui-state-active"><code class="js"><font><font>$ (Selector) maxlength (. </font></font><span class="js__string"><font><font>'destruir'</font></font></span><font><font> );</font></font></code></pre>
</article>

<article>
<header><a name="test"></a><font><font>Teste</font></font></header>
<p><font><font>Obviamente, o teste é muito importante para garantir que o plugin funciona da maneira que esperamos. </font><font>Eu encontrei uma combinação de testes de interação visual e usuário informal ao lado de testes funcionais automatizados funciona bem.</font></font></p>
<p><font><font>Para depurar plugins eu uso </font></font><a href="http://www.mozilla.com/"><font><font>o Firefox</font></font></a><font><font> e
	 </font></font><a href="http://getfirebug.com/"><font><font>Firebug</font></font></a><font><font> , juntamente com
	 </font></font><a href="http://jquery.glyphix.com/"><code><font><font>jquery.debug.js</font></font></code></a><font><font> . </font><font>Com este último, podemos incluir declarações como a seguinte para gravar informação útil, sem interromper o fluxo do processamento. </font><font>Quando utilizado com o Firebug estas mensagens são exibidas na consola, enquanto que para outros navegadores eles são adicionados a uma lista que aparece no fim da página.</font></font></p>
<pre class="ui-state-active"><code class="js"><font><font>. $ Log (mensagem);</font></font></code></pre>
<p><font><font>Uma vez que o plugin está funcionando bem no Firefox, ainda é preciso verificá-lo nos outros principais navegadores que existem algumas diferenças entre suas implementações.</font></font></p>
<p><font><font>Para os testes de unidade que eu uso </font></font><a href="http://qunitjs.com/"><font><font>QUnit</font></font></a><font><font> 
	e criar uma página HTML que contém o JavaScript para os testes. </font><font>Adicionar seções padrão para a página para (bem) mostram os resultados dos testes e para conter os componentes de interface do usuário que está testando contra. </font><font>O
	 </font></font><code><font><font>QUnit-fixação</font></font></code><font><font> divisão está posicionado fora da página para mostrar apenas os resultados do teste, enquanto continua a ter os controles de acesso e "visível" para nossos testes.</font></font></p>
<pre class="ui-state-active"><code class="html"><span class="html__tag_start"><font><font>&lt;Div </font></font></span>&nbsp;<span class="html__attr_name"><font><font>id</font></font></span><font><font> = </font></font><span class="html__attr_value"><font><font>"QUnit" </font></font></span><span class="html__tag_start"><font><font>&gt; </font></font></span><span class="html__tag_end"><font><font>&lt;/ div&gt; </font></font></span>&nbsp;<br><span class="html__tag_start"><font><font>&lt;div </font></font></span>&nbsp;<span class="html__attr_name"><font><font>id</font></font></span><font><font> = </font></font><span class="html__attr_value"><font><font>"QUnit-fixação" </font></font></span><span class="html__tag_start"><font><font>&gt;</font></font></span>&nbsp;<br><font><font> &nbsp;&nbsp;&nbsp;&nbsp;UI componentes aqui ...&nbsp; </font><span class="html__tag_end"><font>&lt;/ div&gt;</font></span></font><br><span class="html__tag_end"><font></font></span></code></pre>
<p><font><font>Os testes podem ser agrupados em módulos, os quais podem então ser divididas em secções, cada uma das quais consiste de uma chamada para </font></font><code><font><font>testar (nome, função)</font></font></code><font><font> 
	com os testes reais aparecem na função de retorno dadas aqui. </font><font>Devemos informar quantos testes vão ser executados dentro de cada seção com
	 </font></font><code><font><font>espera (número)</font></font></code><font><font> . </font><font>Em seguida, execute o código e fazer afirmações com qualquer dos seguintes:</font></font></p>
<pre class="ui-state-active"><code class="js"><font><font>ok (teste, descrição);&nbsp; </font></font><span class="js__sl_comment"><font><font>/ / único teste&nbsp;</font></font></span>&nbsp;<br><font><font> igual (v1, v2, descrição);&nbsp; </font></font><span class="js__sl_comment"><font><font>/ / Comparar dois valores</font></font></span>&nbsp;<br><font><font> NotEqual (v1, v2, descrição);&nbsp; </font></font><span class="js__sl_comment"><font><font>/ / Certifique-se de dois valores diferentes</font></font></span>&nbsp;<br><font><font> deepEqual (obj1, obj2, descrição);&nbsp; </font></font><span class="js__sl_comment"><font><font>/ / Comparar dois objetos</font></font></span>&nbsp;<br><font><font> notDeepEqual (obj1, obj2, descrição);&nbsp; </font></font><span class="js__sl_comment"><font><font>/ / Certifique-se de dois objetos diferentes</font></font></span></code></pre>
<p><font><font>Precisamos ter certeza de que vamos cobrir o maior número de condições e funções que pudermos nestes testes. </font><font>Mais geralmente é melhor como eles são muito fáceis de executar. </font><font>Devemos tentar cobrir de ponta e condições de erro, bem como a funcionalidade padrão.</font></font></p>
<p><font><font>Podemos simular eventos do usuário, adicionando
	 </font><a href="http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/simulate/jquery.simulate.js?spec=svn6063&r=6063"><code><font>jquery.simulate.js</font></code></a><font> à página. </font><font>Use um seletor jQuery para localizar o controle de destino, em seguida, chamar o evento pelo nome e repassar quaisquer parâmetros adicionais para essa chamada.</font></font><a href="http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/simulate/jquery.simulate.js?spec=svn6063&r=6063">
	<code><font></font></code></a><font></font></p>
<pre class="ui-state-active"><code class="js"><font><font>keyCode:. $ simulate.VK_HOME </font><span class="js__brace"><font>}</font></span><font> )</font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span><span class="js__brace"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><span class="js__string"><font></font></span><font></font><span class="js__num"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><br><font></font><span class="js__string"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font><span class="js__property"><font></font></span><font></font><span class="js__brace"><font></font></span><font></font></code></pre>
<p><font><font>Se tudo passa, vamos ver uma </font></font><a href="http://keith-wood.name/maxlength.tests.html"><font><font>barra verde na parte superior da página</font></font></a><font><font> . </font><font>Se não, é uma barra vermelha e volta à prancheta de desenho. </font><font>Não se esqueça de testar o plugin em todos os principais navegadores. </font><font>Se não fizermos isso, podemos ter certeza de que alguém o fará.</font></font></p>
</article>

<article>
<header><a name="publish"></a><font><font>Publishing</font></font></header>
<p><font><font>Para permitir que os usuários sejam o máximo proveito do nosso plugin, é preciso documentá-lo e suas características. </font><font>Incluir uma lista de todas as configurações possíveis para invocar o plugin (além de seus tipos esperados e os valores padrão), juntamente com todos os comandos que podem ser executados em cima dele e seus parâmetros. </font><font>Certifique-se de destacar qualquer comando (s) que impedem o encadeamento de outras funções jQuery. </font><font>Veja um </font></font><a href="http://keith-wood.name/maxlengthRef.html"><font><font>exemplo</font></font></a><font><font> para o plugin MaxLength.</font></font></p>
<p><font><font>Devemos também preparar uma página de demonstração para mostrar o plugin a sua melhor vantagem. </font><font>Dê exemplos das diversas habilidades do plugin e incluir o código que produz los para permitir que os outros para alcançar rapidamente o mesmo efeito e aprender com os nossos exemplos. </font><font>Veja uma </font></font><a href="http://keith-wood.name/maxlength.html"><font><font>amostra</font></font></a><font><font> 
	para o plugin MaxLength.</font></font></p><p>
</p><p><font><font>A outra vantagem de fornecer uma página de demonstração é que nós começamos a ver o plugin do ponto de vista do usuário. </font><font>É fácil de usar e configurar? </font><font>São os seus comandos e funções consistente? </font><font>Ele também fornece um banco de ensaio adicional para o plugin, como nem tudo pode ser verificado em um teste de unidade automatizado. </font><font>Mais uma vez, verifique a demonstração em todos os principais navegadores - muitas vezes há aspectos visuais que diferem entre si.</font></font></p>
<p><font><font>Pacote com tudo do nosso JavaScript, CSS e imagens em um arquivo ZIP para facilitar a distribuição. </font><font>Incluir minimizados e / ou versões para que outros possam reduzir os seus custos de download sem ter que passar por este processo si embalado. </font><font>Veja </font></font><a href="http://dean.edwards.name/packer/"><font><font>Packer Dean Edward</font></font></a><font><font> ferramenta, que pode produzir comprimido (min) ou versões codificadas (bloco). </font><font>Alternativamente, consulte o
	 </font></font><a href="http://code.google.com/closure/compiler/"><font><font>Google Closure Compiler</font></font></a><font><font> para a funcionalidade similar. </font><font>Incluir uma página básica de demonstração para que os usuários começaram.</font></font></p>
<p><font><font>E, finalmente, publicar o plugin no </font></font><a href="http://plugins.jquery.com/"><font><font>
	repositório do plugin jQuery</font></font></a><font><font> para que outros possam se beneficiar de nossos esforços.</font></font></p>
</article>

<article>
<header><a name="download"></a><font><font>Transferências</font></font></header>
<p><font><font>Você pode fazer o download do </font></font><a href="http://keith-wood.name/zip/jquery.maxlength.package-1.1.0.zip" onclick="pageTracker._trackPageview(&#39;/downloads/maxlength-1.1.0&#39;);"><font><font>plugin do MaxLength</font></font></a><font><font> 
	como seria publicado e os </font></font><a href="http://keith-wood.name/zip/jquery.maxlength.support-1.1.0.zip" onclick="pageTracker._trackPageview(&#39;/downloads/maxlength.support-1.1.0&#39;);"><font><font>
	arquivos de suporte</font></font></a><font><font> , incluindo os testes de unidade.</font></font></p>
</article>
</section>
<footer>
<p><font><font>Contato </font></font><a href="http://keith-wood.name/index.html"><font><font>Keith Madeira</font></font></a><font><font> em kbwood {at} iinet.com.au com comentários ou sugestões.</font></font></p>
<hr>
<p><font><font>
	© 2010-13, Keith Madeira
	</font></font><a id="valid" href="http://validator.w3.org/check?uri=http://keith-wood.name/pluginFramework.html">
		<img src="./Um quadro Plugin jQuery_files/html5-small.png" alt="Valid HTML 5"></a>
</p>
</footer>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="./Um quadro Plugin jQuery_files/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4715900-1");
pageTracker._initData();
pageTracker._trackPageview();
</script><div id="goog-gt-tt" class="goog-tooltip skiptranslate" dir="ltr" style="visibility: visible; left: 273px; top: 4177px; display: block;"><div style="padding: 8px;"><div><div class="logo"><img src="./Um quadro Plugin jQuery_files/translate-32.png" width="20" height="20"></div></div></div><div class="top" style="padding: 8px; float: left; width: 100%;"><h1 class="title gray">Texto original</h1></div><div class="middle" style="padding: 8px;"><div class="original-text">When initially attaching the functionality we need to bind events and save the settings for the current field instance.</div></div><div class="bottom" style="padding: 8px;"><div class="activity-links"><span class="activity-link">Sugira uma tradução melhor</span><span class="activity-link"></span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div class="status-message" style="display: none; opacity: 0;"></div></div>

</body></html>